<!DOCTYPE html>
<html style="background-color: #f2f2f2;" lang="en">
<%include("/common/header.html",{title:''}){}%>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm12">
            <div class="layui-row layui-col-space15">
                <div class="layui-card">
                    <div class="layui-card-header">环境健康指数</div>
                    <div class="layui-card-body">
                        <table class="layui-table" lay-skin="line">
                            <tbody>
                            <tr>
                                <td>
                                    <div id="container" style="width:100%; height:300px"></div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="layui-row layui-col-space15">
                <div class="layui-col-sm6">
                    <div class="layui-card">
                        <div class="layui-card-header">发现问题</div>
                        <div class="layui-card-body">
                            <table class="layui-table layuiadmin-page-table" lay-skin="line">
                                <thead>
                                <tr>
                                    <th>发现内容</th>
                                    <th>发布人</th>
                                    <th>发布时间</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td><span class="first">疫情影响</span></td>
                                    <td><i class="layui-icon layui-icon-username">阿良</i></td>
                                    <td><i class="layui-icon layui-icon-time">2020-01-20</i></td>
                                </tr>
                                <tr>
                                    <td><span class="second">疫情影响</span></td>
                                    <td><i class="layui-icon layui-icon-username">阿翔</i></td>
                                    <td><i class="layui-icon layui-icon-time">2020-01-15</i></td>
                                </tr>
                                <tr>
                                    <td><span class="third">疫情影响</span></td>
                                    <td><i class="layui-icon layui-icon-username">胡总</i></td>
                                    <td><i class="layui-icon layui-icon-time">2020-01-09</i></td>
                                </tr>
                                <tr>
                                    <td>疫情影响</td>
                                    <td><i class="layui-icon layui-icon-username">宁总</i></td>
                                    <td><i class="layui-icon layui-icon-time">2020-01-13</i></td>
                                </tr>
                                <tr>
                                    <td>疫情影响</td>
                                    <td><i class="layui-icon layui-icon-username">荣荣</i></td>
                                    <td><i class="layui-icon layui-icon-time">2020-01-04</i></td>
                                </tr>
                                <tr>
                                    <td>疫情影响</td>
                                    <td><i class="layui-icon layui-icon-username">闯哥</i></td>
                                    <td><i class="layui-icon layui-icon-time">2020-01-25</i></td>
                                </tr>
                                <tr>
                                    <td>疫情影响</td>
                                    <td><i class="layui-icon layui-icon-username">周权</i></td>
                                    <td><i class="layui-icon layui-icon-time">2020-01-19</i></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6">
                    <div class="layui-card">
                        <div class="layui-card-header">改进意见</div>
                        <div class="layui-card-body">
                            <table class="layui-table layuiadmin-page-table" lay-skin="line">
                                <thead>
                                <tr>
                                    <th>发现内容</th>
                                    <th>发布人</th>
                                    <th>发布时间</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td><span class="first">疫情影响</span></td>
                                    <td><i class="layui-icon layui-icon-username">阿良</i></td>
                                    <td><i class="layui-icon layui-icon-time">2020-01-20</i></td>
                                </tr>
                                <tr>
                                    <td><span class="second">疫情影响</span></td>
                                    <td><i class="layui-icon layui-icon-username">阿翔</i></td>
                                    <td><i class="layui-icon layui-icon-time">2020-01-15</i></td>
                                </tr>
                                <tr>
                                    <td><span class="third">疫情影响</span></td>
                                    <td><i class="layui-icon layui-icon-username">胡总</i></td>
                                    <td><i class="layui-icon layui-icon-time">2020-01-09</i></td>
                                </tr>
                                <tr>
                                    <td>疫情影响</td>
                                    <td><i class="layui-icon layui-icon-username">宁总</i></td>
                                    <td><i class="layui-icon layui-icon-time">2020-01-13</i></td>
                                </tr>
                                <tr>
                                    <td>疫情影响</td>
                                    <td><i class="layui-icon layui-icon-username">荣荣</i></td>
                                    <td><i class="layui-icon layui-icon-time">2020-01-04</i></td>
                                </tr>
                                <tr>
                                    <td>疫情影响</td>
                                    <td><i class="layui-icon layui-icon-username">闯哥</i></td>
                                    <td><i class="layui-icon layui-icon-time">2020-01-25</i></td>
                                </tr>
                                <tr>
                                    <td>疫情影响</td>
                                    <td><i class="layui-icon layui-icon-username">周权</i></td>
                                    <td><i class="layui-icon layui-icon-time">2020-01-19</i></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<%include("/common/foot.html"){}%>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script>
    var myChart = echarts.init(document.getElementById('container'));
    var optionse = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 10,
            data: ['风险', '正常']
        },
        color: ['#f10c06', '#2F9688'],
        series: [
            {
                name: '健康分值',
                type: 'pie',
                center: ['50%', '50%'], // 饼图的圆心坐标
                radius: ['55%', '80%'],
                avoidLabelOverlap: false,
                hoverAnimation: false,
                label: { //  饼图图形上的文本标签

                    normal: { // normal 是图形在默认状态下的样式
                        show: true,
                        position: 'center',
                        color: 'red',
                        fontSize: 30,
                        fontWeight: 'bold',
                        formatter: '{d}%' // {b}:数据名； {c}：数据值； {d}：百分比，可以自定义显示内容，
                    }
                },

                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [{
                    value: 40,
                    name: "正常",
                    label: {
                        normal: {
                            show: true,
                            color: "#2F9688"
                        }
                    }
                },
                    {
                        value: 60,
                        name: '风险',
                        label: {
                            normal: {
                                show: false
                            }
                        }
                    }
                ]
            }
        ]
    };
    var options = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 10,
            data: ['直接访问', '搜索引擎']
        },
        color: ['#91C7AE', '#C23531'],
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    {value: 335, name: '直接访问'},

                    {value: 1548, name: '搜索引擎'}
                ]
            }
        ]
    };

    // 为echarts对象加载数据
    myChart.setOption(optionse);

    setInterval(function () {
        optionse.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
        myChart.setOption(optionse, true);
    }, 6000);
    //饼图（精细养护）
    /*  var dom = document.getElementById("container");
      var myChart = echarts.init(dom);
      var app = {};
      option = null;
      option = {
          color: ['#60acfc', '#5bc49f', '#ff7c7c', '#9287e7'],
          title: {
              text: '环境健康指数',
              subtext: '分类占比',
              left: 'center'
          },
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c}人 ({d}%)'
          },
          legend: {
              orient: 'vertical',
              left: 'left',
              data: ['临时照料','临时医疗','家政服务','社区餐饮']
          },
          series: [
              {
                  name: '用户年龄占比',
                  type: 'pie',
                  radius: '55%',
                  center: ['50%', '60%'],
                  data: [
                      {value: 10, name: '临时照料'},
                      {value: 15, name: '临时医疗'},
                      {value: 24, name: '家政服务'},
                      {value: 48, name: '社区餐饮'}


                  ],
                  emphasis: {
                      itemStyle: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ]
      };
      if (option && typeof option === "object") {
          myChart.setOption(option, true);
      }*/
    //////////////////////////////////////////////////////
    //饼图（日常养护）
    var dom = document.getElementById("container1");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        color: ['#feb64d', '#9287e7', '#5bc49f', '#60acfc', '#32d3eb'],
        title: {
            text: '男女用户占比',
            subtext: '男女占比',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}人 ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['男', '女']
        },
        series: [
            {
                name: '男女用户占比',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [
                    {value: 885, name: '男'},
                    {value: 222, name: '女'}

                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    if (option && typeof option === "object") {

        myChart.setOption(option, true);

    }
    //////////////////////////////////////////////////////
    //柱图（巡查逐月）
    var dom = document.getElementById("container2");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        title: {
            text: '订单交易逐月统计',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            orient: 'vertical',
            data: ['成交', '未成交'],
            left: 'right'
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '成交',
                type: 'bar',
                color: '#60ACFC',
                data: [12, 9, 22, 18, 19, 8, 30, 25, 21, 23, 18, 19],
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            },
            {
                name: '未成交',
                type: 'bar',
                color: '#AFE39B',
                data: [1, 3, 1, 4, 3, 5, 1, 1, 1, 1, 2, 1],
                markPoint: {
                    data: [
                        {name: '年最高', value: 182.2, xAxis: 7, yAxis: 183},
                        {name: '年最低', value: 2.3, xAxis: 11, yAxis: 3}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            }
        ],
        grid: {
            left: '3%',
            right: '4%',
            bottom: '0%',
            top: '25%',
            containLabel: true
        }
    };
    if (option && typeof option === "object") {

        myChart.setOption(option, true);
    }

</script>
</body>
</html>